<div id="tb<?php echo $uniqid;?>" class="easyui-panel" style="padding:5px">
  <table class="datagrid-toolbar" cellspacing="0" cellpadding="0" style="padding:5px 10px !important; background: none; border-bottom:none;">
    <tbody>
    <tr>
    <td colspan="3" style="padding-bottom: 5px;">
      <span class="l-btn l-btn-small l-btn-plain" :class="params.mode=='all'?'selected':''"
            @click="filter('all')"><span class="l-btn-text">全部</span></span>
      <span class="l-btn l-btn-small l-btn-plain" :class="params.mode=='alltime'?'selected':''"
            @click="filter('alltime')"><span class="l-btn-text">长期有效</span></span>
      <span class="l-btn l-btn-small l-btn-plain" :class="params.mode=='ex90day'?'selected':''"
            @click="filter('ex90day')"><span class="l-btn-text">超过90天效期</span></span>
      <span class="l-btn l-btn-small l-btn-plain" :class="params.mode=='in90day'?'selected':''"
            @click="filter('in90day')"><span class="l-btn-text">90天内过期</span></span>
      <span class="l-btn l-btn-small l-btn-plain" :class="params.mode=='in60day'?'selected':''"
            @click="filter('in60day')"><span class="l-btn-text">60天内过期</span></span>
      <span class="l-btn l-btn-small l-btn-plain" :class="params.mode=='in30day'?'selected':''"
            @click="filter('in30day')"><span class="l-btn-text">30天内过期</span></span>
      <span class="l-btn l-btn-small l-btn-plain" :class="params.mode=='in7day'?'selected':''"
            @click="filter('in7day')"><span class="l-btn-text">7天内过期</span></span>
      <span class="l-btn l-btn-small l-btn-plain" :class="params.mode=='in1day'?'selected':''"
            @click="filter('in1day')"><span class="l-btn-text">1天内过期</span></span>
      <span class="l-btn l-btn-small l-btn-plain" :class="params.mode=='notday'?'selected':''"
            @click="filter('notday')"><span class="l-btn-text">已过期</span></span>
    </td>
    </tr>
    <tr>
      <td style="padding: 0 10px;"><span style="line-height:30px;">领取日期：</span>
        <input id="memberpickgoodscardStartOn" v-model="params.memberpickgoodscard_start" style="width:110px" type="text"
               class="easyui-datebox"> </input>至
        <input id="memberpickgoodscardEndOn" v-model="params.memberpickgoodscard_end" style="width:110px" type="text"
               class="easyui-datebox"> </input>
      </td>
      <td style="padding: 0 10px;">
        <select v-model="params.keywordsType" class="forminput inputstyle textbox-text validatebox-text" @change="keywordsTypeChange" style="width:120px; border-color: #cccccc !important;">
          <option value="card_id">提货卡ID</option>
          <option value="card_sn">提货卡编号</option>
          <option value="card_name">提货卡名称</option>
          <option value="user_id">用户ID</option>
          <option value="user_phone">用户手机号</option>
        </select>
        <input v-model="params.keywords" placeholder="请输入内容" @keyup.enter="init"
                            class="forminput inputstyle validatebox-text textbox-prompt easyui-validatebox keywords_input_search_box"
                            type="text"> </input>
      </td>
      <td>
        <a href="javascript:void(0);" @click="init" class="l-btn l-btn-small l-btn-plain"><span
              class="l-btn-left l-btn-icon-left"><i class="iconfont icon-sousuo"></i><span
              class="l-btn-text">查询</span></span></a>
        <a href="javascript:void(0);" @click="reset" class="l-btn l-btn-small l-btn-plain"><span
                class="l-btn-left l-btn-icon-left"><i class="iconfont icon-shuaxinrefresh39"></i><span
                class="l-btn-text">重置</span></span></a>
        <a href="javascript:void(0);" @click="init();" class="l-btn l-btn-small l-btn-plain"><span
                class="l-btn-left l-btn-icon-left"><i class="iconfont icon-shuaxin"></i><span
                class="l-btn-text">重载</span></span></a>
      </td>
    </tr>
    </tbody>
  </table>
</div>
<div class="con"  style="-moz-user-select:none;">
  <table id="memberpickgoodscard"></table>
</div>
<div id="memberpickgoodscarddlg" class="easyui-dialog" style="width:840px; height:520px;" title="信息框" closed="true"></div>
<script>
  var memberpickgoodscardVm = new Vue({
    el: '#tb<?php echo $uniqid;?>',
    data: {
      params: {
        memberpickgoodscard_start: '',
        memberpickgoodscard_end: '',
        keywords: '',
        keywordsType:'card_id',
        mode:'all',
      },
      defParams: {
        memberpickgoodscard_start: '',
        memberpickgoodscard_end: '',
        keywords: '',
        keywordsType:'card_id',
        mode:'all',
      },
      initLoad:false,
    },
    filters: {
      formatDate(nS){
        return new Date(parseInt(nS) * 1000).toLocaleString().replace(/:\d{1,2}$/,' ');
      }
    },
    mounted() {
      setTimeout(()=>{
        this.mounted();
      }, 200);
    },
    methods: {
      mounted: function (){
        $('#tb<?php echo $uniqid;?> #memberpickgoodscardStartOn').datebox('setValue', this.params.memberpickgoodscard_start);
        $('#tb<?php echo $uniqid;?> #memberpickgoodscardEndOn').datebox('setValue', this.params.memberpickgoodscard_end);
        this.init();
      },
      init: function () {
        this.params.memberpickgoodscard_start = $('#tb<?php echo $uniqid;?> #memberpickgoodscardStartOn').datebox('getValue');
        this.params.memberpickgoodscard_end = $('#tb<?php echo $uniqid;?> #memberpickgoodscardEndOn').datebox('getValue');
        if(this.params.keywordsType == 'user_phone'){
          if(this.params.keywords.length > 0 && this.params.keywords.length < 4){
            $('#tb<?php echo $uniqid;?> .keywords_input_search_box').focus().tooltip({
              position: 'top',
              content: '<span style="color:#ff0000">查询时，用户手机号不能少于4位数！</span>',
            });
            return false;
          }
        }
        memberpickgoodscardReload();
      },
      filter(mode) {
        this.params.mode = mode;
        this.init();
      },
      keywordsTypeChange: function (e){
        let placeholder = '请输入内容';
        if(this.params.keywordsType == 'user_phone'){
          placeholder = '用户手机号不能少于4位数';
        }
        $('#tb<?php echo $uniqid;?> .keywords_input_search_box').attr('placeholder',placeholder);
      },
      reset:function (){
        this.params = JSON.parse(JSON.stringify(this.defParams));
        this.mounted();
      }
    }
  });

  var memberpickgoodscardDelete = function (id) {
    let row_id = id || $('#memberpickgoodscard').datagrid('getSelected').id;
    if (row_id){
      $.messager.confirm('提示', '<span style="color: #d51313; font-weight: bold; font-size: 1.1em;">确定要冻结用户的提货卡？</span>', function (r) {
        if (r) {
          $.messager.prompt('冻结提示', '请输入冻结原因！', function (remark){
            if('undefined' !== typeof(remark)){
              let new_remark = (remark.length === 0)?'无':remark;
              $.messager.progress();
              $.post('/admin/memberpickgoodscard/delete', {id: row_id, remark: new_remark}, function (data) {
                $.messager.progress('close');
                if (data.ret === 0) {
                  $.messager.show({
                    title: '提示',
                    msg: data.msg,
                    timeout: 3000,
                    showType: 'slide'
                  });
                  memberpickgoodscardReload();
                } else {
                  $.messager.alert('出错', data.msg, 'error');
                }
              }, 'json');
            }
          });
        }
      });
    }else{
      $.messager.alert('提示','请先选择要冻结的卡！','warning');
    }
  };

  var memberpickgoodscardRestore = function (id) {
    let row_id = id || $('#memberpickgoodscard').datagrid('getSelected').id;
    if (row_id){
      $.messager.confirm('提示', '<span style="color: #d51313; font-weight: bold; font-size: 1.1em;">确定要解冻用户的提货卡？</span>', function (r) {
        if (r) {
          $.messager.prompt('解冻提示', '请输入解冻原因！', function (remark){
            if('undefined' !== typeof(remark)){
              let new_remark = (remark.length === 0)?'无':remark;
              $.messager.progress();
              $.post('/admin/memberpickgoodscard/restore', {id: row_id, remark: new_remark}, function (data) {
                $.messager.progress('close');
                if (data.ret === 0) {
                  $.messager.show({
                    title: '提示',
                    msg: data.msg,
                    timeout: 3000,
                    showType: 'slide'
                  });
                  memberpickgoodscardReload();
                } else {
                  $.messager.alert('出错', data.msg, 'error');
                }
              }, 'json');
            }
          });
        }
      });
    }else{
      $.messager.alert('提示','请先选择要解冻的卡！','warning');
    }
  };
  
  var memberpickgoodscardReload = function () {
    if(memberpickgoodscardVm.initLoad){
      memberpickgoodscardVm.initLoad = false;
    }else{
      $("#memberpickgoodscard").datagrid('load', memberpickgoodscardVm.params);
    }
  };

  var memberpickgoodscardSearch = function () {
    var height = $(window).height() - $(".top").height() - 46;
    var width = $(window).width() - $(".leftmenu").width() - 8;
    $("#memberpickgoodscard").datagrid({
      title: '已发放提货卡管理',
      width: width,
      height: height,//高度
      singleSelect: true,//如果为true，则只允许选择一行
      striped: true,//是否显示斑马线效果。
      rownumbers: false,//如果为true，则显示一个行号列。
      pagination: true,//是否显示分页
      pageSize: 10,
      pageList: [10, 20, 50, 100],
      method: 'post',
      sortName: 'created_at',
      sortOrder: 'desc',
      idField: 'id',
      url: '/admin/memberpickgoodscard/index',
      queryParams: memberpickgoodscardVm.params,
      fitColumns: true,//真正的自动展开/收缩列的大小，以适应网格的宽度，防止水平滚动。
      nowrap: true,//如果为true，则在同一行中显示数据。设置为true可以提高加载性能。 是否换行
      selectOnCheck: false,
      checkOnSelect: true,
      loadMsg:'正在处理，请稍后。。。',
      toolbar: '#tb<?php echo $uniqid;?>',
      columns: [[
        {field:'id',title:'ID', width: fixWidth(3), align: "center", halign: 'center'},
        {field:'card_sn',title:'提货卡编号', width: fixWidth(8), align: "center", halign: 'center'},
        {field:'member',title:'卡的用户', width: fixWidth(10), align: "left", halign: 'center',formatter:function (value,rowData,rowIndex){
            let content = '';
            if(value){
              if(value.avatar){
                content += '<div style="display: flex" class="touxiang_wenzi">';
                content += '<div style="width: 32px; display: flex; align-items: center;"><img style="width: 30px; height: 30px; border-radius: 50%; border:1px solid #eee; overflow: hidden;" src="'+value.avatar+'"></div>';
                content += '<div style="width: calc(100% - 42px); padding-left: 10px;">';
              }else{
                content += '<div class="touxiang_wenzi">';
              }
              content += '用户ID：<span>'+rowData.member_id+'</span><br>';
              if(value.realname){
                content += '昵称(姓名)：<span>'+value.nickname+'('+value.realname+')</span><br>';
              }else{
                content += '昵称：<span>'+value.nickname+'</span><br>';
              }
              content += '手机号：<span>'+value.phone+'</span>';
              if(value.avatar){content += '</div>';}
              content += '</div>';
            }else{
              content = '用户不存在';
            }
            return content;
          }},
        {field:'pickgoods_card',title:'提货卡信息', width: fixWidth(15), align: "left", halign: 'center', formatter: function (value, rowData, rowIndex){
            let card_content = '';
            if(value){
              card_content += '<p>卡ID：<span>'+value.id+'</span></p>';
              card_content += '<p>卡名称：<span>'+value.name+'</span></p>';
              card_content += '<p>卡面额：<span>'+value.amount+'元</span></p>';
            }else{
              card_content = '无效提货卡';
            }
            return card_content;
          }
        },
        {field:'money',title:'当前余额', width: fixWidth(5), align: "center", halign: 'center', formatter: function (value, rowData, rowIndex){
              return value+'元';
          }},
        {field:'expire',title:'过期时间', width: fixWidth(6), align: "center", halign: 'center',formatter:function (value,rowData,rowIndex){
            let ex_value = '';
            if(rowData.expire_text == '已过期'){
              ex_value = '<span style="color: #8d0303;">'+rowData.expire_text+'</span>'
            }else if(rowData.expire_text == '1天内过期'){
              ex_value = value+'<br><span style="color: #ec0202;">'+rowData.expire_text+'</span>'
            }else if(rowData.expire_text == '7天内过期'){
              ex_value = value+'<br><span style="color: #f57118;">'+rowData.expire_text+'</span>'
            }else if(rowData.expire_text == '30天内过期'){
              ex_value = value+'<br><span style="color: #f5bf38;">'+rowData.expire_text+'</span>'
            }else if(rowData.expire_text == '60天内过期'){
              ex_value = value+'<br><span style="color: #0e929f;">'+rowData.expire_text+'</span>'
            }else if(rowData.expire_text == '90天内过期'){
              ex_value = value+'<br><span style="color: #1972cc;">'+rowData.expire_text+'</span>'
            }else if(rowData.expire_text == '长期有效'){
              ex_value = '<span style="color: #037e2a;">'+rowData.expire_text+'</span>'
            }else{
              ex_value = value+'<br><span style="color: #28b413;">'+rowData.expire_text+'</span>'
            }
            return ex_value;
          }},

        {field:'deleted_at',title:'状态', width: fixWidth(6), align: "center", halign: 'center',formatter:function (value,rowData,rowIndex){
            return value ? '已冻结' : '正常';
          }, styler(value, rowData){
            return value ? 'color:red' : '';
          }},
        {field:'created_at',title:'领取时间', width: fixWidth(6), align: "center", halign: 'center',formatter:function (value,rowData,rowIndex){
            return value?value:'--';
          }},
        {field: 'options', title: '操作', width: fixWidth(4), align: "center", halign: 'center', formatter: function (value, rowData, rowIndex) {
            let buttons = '<div class="table">';
            if(rowData.deleted_at) {
              buttons += '<span class="l-btn l-btn-small color9 table" style="margin-right: 5px;" onclick="memberpickgoodscardRestore(\'' + rowData.id + '\')"><span class="l-btn-text">解冻</span></span>';
            }else{
              buttons += '<span class="l-btn l-btn-small color9 table" style="margin-right: 5px;" onclick="memberpickgoodscardDelete(\'' + rowData.id + '\')"><span class="l-btn-text">冻结</span></span>';
            }
            return buttons + '</div>';
          }},
      ]],
    });
    memberpickgoodscardVm.initLoad = true;
  };
  onDatagridResize("#memberpickgoodscard");
  memberpickgoodscardSearch();
</script>
<style>
  .change_before{
    color: #207ab0;
  }

  .change_after{
    color: #ef6d1b;
  }

  .score_add{
    color: #08de4d;
  }

  .score_subtract{
    color: #c40908;
  }

  .event_backofficechange{
    color: #037e2a;
  }

  .event_signin{
    color: #750302;
  }

  .event_transfer{
    color: #818105;
  }

  .event_orderpay{
    color: #bd09d9;
  }

  .event_refund{
    color: #d51313;
  }

  .event_orderaward{
    color: #ee650c;
  }

  .event_share{
    color: #007293;
  }

  .l-btn-plain{
    border: rgba(0,0,0,0) 1px solid;
  }

  .datagrid-body-row td{
    line-height: 1.8em !important;
  }

  .datagrid-row td{
    padding-top: 10px;
    padding-bottom: 10px;
    line-height: 1.8em !important;
  }

  .datagrid-toolbar .selected {
    color: #f1f1f1;
    background: #1065a7;
    border: 1px solid #f0f0f0;
  }

  .touxiang_wenzi span{
    color: #007293;
  }

  .keywords_input_search_box{
    width: 300px;
    border-color: #cccccc;
  }
</style>
